import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import { aUrl } from '../../../static/axios_url';
import Roll from '../../../components/Roll';
import Nav from '../../../components/Nav';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';
import './index.css'
export default function Firday() {
    const [firdayData, setfirdayData] = useState([])
    useEffect(() => {
        axios.post(aUrl + '/firdayData', { ye: 1 }).then((res) => {
            setfirdayData([...res.data, ...res.data])
            console.log(res.data);
        })
    }, [])
    //自定义倒计时Hook
    function lastTime(dTime, fun) {
        var nDate = new Date(dTime);
        let itime = null
        clearInterval(itime);
        itime = setInterval(function () {
            var oDate = new Date();
            var Time = Math.floor((nDate - oDate) / 1000);
            var iD = Math.floor(Time / 86400);
            var iH = Math.floor(Time % 86400 / 3600);
            var iM = Math.floor(Time % 86400 % 3600 / 60)
            var iSe = Math.floor(Time % 60);
            if (iD === 0 && iH === 0 && iM === 0 && iSe === 0) {
                clearInterval(itime);
            }
            fun({ iD, iH, iM, iSe })
        }, 1000);
    }
    const [timedowm, settimedowm] = useState({})
    useEffect(() => {
        lastTime('2021-12-13 00:00:00', settimedowm)
    }, [])
    //点击购物车小图标的按钮弹出加入购物车的弹窗
    const [ischoceshop, setchoceshop] = useState({ g_id: '', s_id: '', nowprice: '', g_name: '', img: '' })
    function addcar(s_id, nowprice, g_id, g_name, img) {
        const carwindow = document.getElementsByClassName('C-modul')[0]
        carwindow.className = 'C-modulshow'
        setchoceshop({ g_id, s_id, nowprice, g_name, img })
    }
    // 点击弹窗的立即购买的按钮
    const navigate = useNavigate()
    const [countaddcar, setaddcar] = useState(0)
    function addtocar() {
        setaddcar(0)
        const a = countarr.kmg.filter(v => {
            return v.ischeck === true
        })

        if (countaddcar === 0) {
            message.success('请选择数量');
        } else {
            const addshop = {
                g_id: ischoceshop.g_id,
                s_id: ischoceshop.s_id,
                price: ischoceshop.nowprice,
                g_name: ischoceshop.g_name,
                g_num: countaddcar,
                g_g: a[0].mg,
                img: ischoceshop.img
            }
            const modul = document.getElementsByClassName('C-modulshow')[0]
            modul.className = 'C-modul'
            console.log(addshop);
            // navigate('/shop/ordermag/shippmag?', addshop)
            navigate('/shop/ordermag/shippmag', { state: [addshop, 'firday'] })
        }

    }
    //初始化规格
    //选择加入购物车规格变色
    const [countarr, setcountarr] = useState({
        kmg: [],
    })
    useEffect(() => {

        setcountarr({
            kmg: [
                { mg: 500, ischeck: false },
                { mg: 1000, ischeck: false },
                { mg: 1500, ischeck: false },
                { mg: 2000, ischeck: false }
            ]
        })
    }, [])
    //点击减号购物车-1
    function loseone() {
        if (countaddcar > 0) {
            setaddcar(countaddcar - 1)
        } else {
            setaddcar(0)
        }
    }
    //点击改变选择规格的边框和背景
    function ischocemg(i) {
        const ischoceit = JSON.parse(JSON.stringify(countarr))
        for (let index = 0; index < ischoceit.kmg.length; index++) {
            ischoceit.kmg[index].ischeck = false
        }
        ischoceit.kmg[i].ischeck = !ischoceit.kmg[i].ischeck
        setcountarr(ischoceit)
    }

    return (
        <div>
            <Nav num={3} />
            <div className="lunbo">
                <Roll />
            </div>
            <div className='firday'>
                <div className='firdayDown'>
                    <div>距离下一个周五还有：
                        <span>{timedowm.iD}天</span> ：
                        <span>{timedowm.iH}</span> ：
                        <span>{timedowm.iM}</span> ：
                        <span>{timedowm.iSe}</span></div></div>
                <ul className='firday-main'>
                    {firdayData.map((firdayData, i) => {
                        return <li key={i} className="firdayLi">
                            <img src={firdayData.img} alt="" />
                            <h3><Link to={'/fridayparticulars?' + firdayData.id}>{firdayData.title}</Link></h3>
                            <h4>{firdayData.gui_ge} 个装</h4>
                            <h5 ><i>礼拜五价 : </i>
                                <span className="new_price">￥{firdayData.new_price}</span></h5>
                            <h6 onClick={() => addcar(firdayData.s_id, firdayData.new_price, firdayData.id, firdayData.title, firdayData.img)}>立刻购买</h6>
                        </li>
                    })}
                </ul>
            </div>
            <div className="C-modul">
                <h4>请选择产品规格</h4>
                <hr />
                <div className="nowprice">
                    <strong>现价：￥{ischoceshop.nowprice}</strong>&nbsp;&nbsp;&nbsp;<span>原价：{ischoceshop.oldprice}</span>
                </div>
                <div className="chocekg">
                    <div className="ischocekg">请选择规格</div>
                    {
                        countarr.kmg.map((v, i) => {
                            return (
                                <div className={v.ischeck ? 'kgnum1' : 'kgnum'} onClick={() => ischocemg(i, v.mg)} key={i}>{v.mg}</div>
                            )
                        })
                    }

                    <div className="addchar">
                        <div className="ischocekg">数量:</div>
                        <div className="addnum">
                            <div className="losenum" onClick={loseone}><i className='fa fa-minus'></i></div>
                            <div className="carnums">{countaddcar}</div>
                            <div className="losenum" onClick={() => setaddcar(countaddcar + 1)}><i className='fa fa-plus'></i></div>
                        </div>
                        <div className="to-cart" onClick={addtocar}>
                            立即购买
                        </div>

                    </div>

                </div>
            </div>
        </div>
    )
}
